<link rel="stylesheet" type="text/css" href="../Styles/css_main.css">

<style type="text/css">

.hint p {
    margin-top: 0px;
    padding-top: 6px;

}

#item_atual_selecionado {
	width: 304px;
	margin-top: 90px;	
	margin-left: 40px;
	border-right: solid 1px #98A0A3;
	position:fixed;
	
}

#itens_sistema{
	width:72%;
	margin-top: 30px;	
	/* ou padding */
	margin-left: 350px;
	position:absolute;
}

.item {
	margin-top: 20px;
	margin-left: 20px;
	width: 140px;
	height: 150px;
	border: thick;

	border-radius: 7px;
	position:relative;
	float: left;
}

.item > img {
	padding-top: 10px;
    padding-left: 23px;
    padding-bottom: 5px;
}


</style>

<script type="text/javascript">
	
	function controlaItens(){
		
		var id_div = "";
		var img_src = "";
		var p_item = "";
		
		$('#busca_item_input').keypress(function(e){
			if(e.wich == 13 || e.keyCode == 13){
				abreInsereItens($('#busca_item_input').val());
			}
		}); 
		
		$("#add_img_item_selecionado").on("mouseover", function() {
			$(this).attr('src', "../Content/aprovar.png");
		})
		
		$("#add_img_item_selecionado").on("mouseout", function() {
			$(this).attr('src', "../Content/add.png");
		})

		
		if ($('#itens_sistema').height() > 600){
			$('#principal').css('height',  $('#itens_sistema').height() + 80);
		}
		
		$(".item").on("mouseover", function() {
			$(this).css("background", "#98A0A3");
		})
		
		$(".item").on("mouseout", function() {
			$(this).css("background", "#CCCCCC");
		})
		
		$(".item").on("click", function() {
			
			id_div = $(this).prop("id");
			img_src = $('#' + id_div + ' img').prop('src');
			p_item = $('#' + id_div + ' p').html();
			
			iditem = $('#' + id_div + '_idItem').val();
			catitem = $('#' + id_div + '_mCategoria').val();
			
			$('#img_item_selecionado','#item_atual_selecionado').prop('src',img_src);
			$('#nome_item_selecionado','#item_atual_selecionado').html(p_item);
			
			$('#selecionado_idItem').val(iditem)
			$('#selecionado_mCategoria').val(catitem);
		})
		
	}
	
	function trocaEstrela(img){
		
		for (i = 1; i <= 5; i++) { 
			$('#' + i,'#classificacao_stars').attr('src', "../Content/star_null.png");
		} 

		for (i = 1; i < img.id; i++) { 
			$('#' + i,'#classificacao_stars').attr('src', "../Content/star.png");	
		} 
		
		if ($(img).attr('src') == "../Content/star.png"){
			img.src = "../Content/star_null.png";
		} else {
			img.src = "../Content/star.png";
		}
	}
	
</script>

<div id="busca_item">
	<select name="filtro_busca" id="filtro_busca" class="select_busca" >
        <option selected>Categoria</option>
        <?php
		
		  require_once ('../Controller/busca_categorias.php');
		  
		  for ($x = 1; $x <= count($categorias); $x++) {
		  	echo '<option value="'.$x.'">'.$categorias[$x].'</option>';
		  }		  
		  ?>
    </select>
    
	<input type="text" name="busca_item_input" id="busca_item_input" placeholder = "  Busca" class="busca">    
</div>

<div id="item_atual_selecionado">
    
    <input type="hidden" id="selecionado_idItem" />
    <input type="hidden" id="selecionado_mCategoria" />

    <img src="../Content/user_avail.png" id="img_item_selecionado" width="200" style="padding-left: 40px; padding-bottom: 10px;" />
    <p id="nome_item_selecionado" align="center">Selecione um Item</p>
    
	<label for="plataforma"><span class="texto1">Plataforma:</span></label>
    <select name="plataforma" id="plataforma" style=" margin-top: 30px; margin-bottom: 20px;">
        <?php
		
		  require_once ('../Controller/busca_plataformas.php');
		  
		  for ($x = 1; $x <= count($plataformas); $x++) {
		  	echo '<option value="'.$x.'">'.$plataformas[$x].'</option>';
		  }		  
		  ?>
    </select>
	
    <div id="classificacao_stars" style="width: 220px; position:absolute;">
    	<span class="texto1">Classificação:</span>
     	<img src="../Content/star_null.png" id="1" onmouseover="trocaEstrela(this);" />
        <img src="../Content/star_null.png" id="2" onmouseover="trocaEstrela(this);" />
        <img src="../Content/star_null.png" id="3" onmouseover="trocaEstrela(this);" />
        <img src="../Content/star_null.png" id="4" onmouseover="trocaEstrela(this);" />
        <img src="../Content/star_null.png" id="5" onmouseover="trocaEstrela(this);" />
     </div>
     
     <img src="../Content/add.png" id="add_img_item_selecionado" width="50" 
		height="50" style="padding-left: 100px; padding-top: 60px;" onclick="insereExemplar(0,0,'',0);" />
				
</div>

<div id="itens_sistema">

<?php 

	@$busca_get = $_GET['busca'];
	
	if ($busca_get != ""){
		echo "<script>$('#busca_item').val('".$busca_get."');</script>";
	}
	
	require_once ('../Controller/busca_itens_sistema.php');

	function listaItens($busca){
		
		global $itens;		
				
		if(empty($itens)) {
		
			echo '<div id="semitens" class="centro_azul borda-arredondada hint"><p>Não existem itens disponíveis, jovem gafanhoto.<p></div>';
		
		} else {
		
			for ($x = 0; $x < count($itens); $x++) {
				
				if ($busca != ""){
					if (strripos($itens[$x]->nmItem, $busca) === false){			
						continue;	
					}
				}
				   
				?> 
					<div id="item_<?php echo $itens[$x]->cdItem; ?>" class="item">
						<img src="../Content/itens/<?php echo $itens[$x]->cdItem; ?>.jpg" width="90" height="90" style="border-radius: 80px;"/>
 						<p id="nome_item" align="center"><?php echo $itens[$x]->nmItem; ?></p>
						
                        <input type="hidden" id="item_<?php echo $itens[$x]->cdItem; ?>_idItem" value="<?php echo $itens[$x]->cdItem; ?>"  />
                        <input type="hidden" id="item_<?php echo $itens[$x]->cdItem; ?>_mCategoria" value="<?php echo ($itens[$x]->nmCategoria); ?>"  />
					</div>	
					
				<?php
			}
			
			?>
            	<div class="item" onclick="abreInsereItem();">
                    <img src="../Content/add.png" width="90" height="90" style="border-radius: 80px;"/>
                    <p id="nome_item" align="center">Adicionar Novo</p>
                </div>
  				<script>controlaItens();</script>
			<?php
		}
	}
		
	listaItens($busca_get);
	
 ?>


</div>